<template>
	<div style="margin-top:1px;">
		<img src="../assets/images/headtop/san.png" style="float:left;margin-left:20px;margin-top:7px;width: 18px;" />
		<span style="font-size:20px;display:block"></span>

		<el-breadcrumb separator="/" class="nav" v-if="flag" style="margin-bottom:30px">
			<el-breadcrumb-item style="margin-left: 10px;color: #ccc; font-weight: 400;font-size: 12px;">当前位置
			</el-breadcrumb-item>
			<el-breadcrumb-item style="color: #ccc; font-weight: 400;font-size: 12px;" class="animated bounceIn"
				:key="sanvalueone">{{sanvalueone}}</el-breadcrumb-item>

			<el-breadcrumb-item class="animated fadeInRight" :key="sanvalue" style="font-weight: 400;
    cursor: text;
    color: #ccc;font-size: 12px;">{{sanvalue}}</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- <el-button
      @click="goback()"
      size="mini"
      style="margin-left:1000px;position: absolute;
    top: 49px;"
    >返回</el-button>-->
		<!-- <el-form>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" size="mini" v-if="flag3">保 存</el-button>
        <el-button @click="goback()" size="mini" type="primary">返回</el-button>
        <el-button @click="resetForm('ruleForm')" size="mini" type="primary" v-if="flag3">取 消</el-button>
      </el-form-item>
    </el-form> -->
		<!-- <div class="tagtop" v-if="flag">
      <el-tag
        :key="tag"
        v-for="tag in dynamicTagsone"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
        @click="gopath(tag)"
      >{{tag}}</el-tag>

      <el-button
        type="primary"
        v-if="flag1"
        style="margin-top:5px;font-size:12px;margin-left:5px"
        size="mini"
        round
        @click="delall()"
      >关闭所有标签</el-button>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
    ></el-input>-->
		<!-- </div> -->

		<!-- <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button> -->
	</div>
</template>
<style>
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.5s;
	}

	.fade-enter,
	.fade-leave-active {
		opacity: 0;
	}

	.el-tag+.el-tag {
		margin-left: 15px;
	}

	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}
</style>

<script>
	import Bus from "@/utils/bus.js";
	import {
		getmenus
	} from "@/api/manage";
	import qs from "qs";
	export default {
		data() {
			return {
				sanvalue: "",
				dynamicTags: [],
				inputVisible: false,
				inputValue: "",
				dynamicTagsone: [],
				flag: false,
				flag1: false,
				sanvalueone: ""
			};
		},
		mounted() {
			localStorage.Tags = "";
			Bus.$on("valtwo", data => {
				console.log(data, "fff");
				this.sanvalue = data;
				this.flag = true;
				this.dynamicTagsone.push(data);
				localStorage.Tags = JSON.stringify(this.dynamicTagsone);
				//    console.log(this.dynamicTagsone.length, "ooo");
				if (this.dynamicTagsone.length > 0) {
					this.flag1 = true;
				}
			});
			Bus.$on("valthree", data => {
				console.log(data, "oooo");
				this.sanvalueone = data;
			});
		},
		methods: {
			goback() {
				this.$router.go("-1");
			},
			handleClose(tag) {
				this.dynamicTagsone.splice(this.dynamicTagsone.indexOf(tag), 1);

				if (this.dynamicTagsone.length === 0) {
					this.flag = false;
				}
				localStorage.Tags = JSON.stringify(this.dynamicTagsone);
			},
			gopath(tag) {
				getmenus().then(res => {
					res.records.forEach((item, i) => {
						if (res.records[i].resourceName === tag) {
							//   console.log(res.records[i].resourceName, "llm");
							this.$router.push(res.records[i].resourceUrl);
						}
					});
				});
			},
			delall() {
				this.dynamicTagsone = [];
				localStorage.Tags = [];
				this.flag1 = false;
				this.flag = false;
			},
			handleInputConfirm() {
				let inputValue = this.inputValue;
				if (inputValue) {
					this.dynamicTagsone.push(inputValue);
				}
				this.inputVisible = false;
				this.inputValue = "";
			}
		}
	};
</script>
<style lang="less" scoped>
	.tagtop {
		border: 1px solid #e0e0e0;
		border-bottom: 1px solid #188097;
		background: #f5f5f5;
		line-height: 34px;
		margin-bottom: 10px;
		padding: 3px 10px 0 10px;
		font-size: 14px;
		font-weight: bold;
		border-radius: 7px;
	}

	.el-tag {
		color: #409eff;
		background-color: #f5f5f5;
		border: none;
	}

	.nav {
		height: 30px;
		line-height: 30px;
		margin-left: 5px;
	}

	.sanname {}

	.el-breadcrumb__inner {
		color: #97a8be !important;
		font-weight: 700 !important;
	}

	.fadeInRight {
		animation-duration: 0.1s;
		animation-delay: 0.1s;
	}
</style>
